<template>
    <div class="items notice_that_click" :style="'padding:'+padding+';height: '+height+';',shadowFlag ? 'box-shadow: 0px 1px 10px 0px #0000001A;':''">
        <div class="mRight40 notice_that_tab center" :class="tabIndex == index ? 'tabClass_1' : ''"
            v-for="(item, index) in list" @click="tabClick(index)">{{ item.name }}</div>
    </div>
</template>

<script lang="ts" name="Shopping_list" setup>
import { ref, reactive } from "vue";

// 组件传来的值
defineProps({
    // xlink:href属性的前缀
    shoppingList: {
        type: Array,
        default: [],
    },
    padding:{
        type:String,
        default:''
    },
    height:{
        type:String,
        default:''
    },
    shadowFlag:{
        type:Boolean,
        default:false
    }
})

const tabIndex = ref<number>(0)

let list = ref([
    {
        name: 'Товары Подробнее',
    },
    {
        name: 'Оценка покупателей（1000+）',
    },
    {
        name: 'Информация о закупках',
    },
    {
        name: 'Квалификационный сертификат',
    },
])


// 传递参数
const emit = defineEmits(["tabClick"]); // 所有方法一起定义

const tabClick = (index: number) => {
    // console.log('接收到的值:', index);
    tabIndex.value = index
    emit("tabClick", index);
};


</script>
<script lang="ts">
export default {
    name: 'Home'
}
</script>

<style lang="less" scoped>
.notice_that_click {
    // width: 100%;
    
    // padding: 0 40px;
    // box-shadow: 0px 1px 10px 0px #0000001A;

    .notice_that_tab {
        height: 100%;
    }

    .tabClass_1 {
        color: #2C5AA7;
        border-bottom: 3px solid #2C5AA7;
    }
}

.notice_that_tab {
    height: 100%;
}

.tabClass_1 {
    color: #2C5AA7;
    border-bottom: 3px solid #2C5AA7;
}
</style>